<template>
  <div class="list">
    <div>
      <div v-for="(item,index) in attendList">
        <card :key="index">
          <p slot="header"><span style="margin-left: 10px">{{item.punchDate}}</span></p>
          <div slot="content" class="card-padding">
            <div class="card-item">
              <div class="vux-1px-r">
                <span>上班</span>
              </div>
              <div class="vux-1px-r">
                {{item.clockInTime}}
              </div>
              <div class="vux-1px-r">
                <span v-if="item.onPunchRecordStatus=='NORMAL'" class="normal">正常</span>
                <span v-else-if="item.onPunchRecordStatus=='EXCEPTION'" class="exception">异常</span>
                <span v-else-if="item.onPunchRecordStatus =='BELATE'" class="late">迟到</span>
                <span v-else-if="item.onPunchRecordStatus =='CLOCKISNULL'" class="nopunch">未打卡</span>
                <span v-else class="exception">{{item.onPunchRecordStatus}}</span>
              </div>
              <div class="vux-1px-r">
                <img :src="_getPath(item.onPunchFileStore)" @click="show(_getPathNo(item.onPunchFileStore),$event)"
                     class="previewer-img" style="height: 100%;max-width:100%;">
              </div>
            </div>
            <div v-if="item.clockOutTime" class="card-item">
              <div class="vux-1px-r">
                <span>下班</span>
              </div>
              <div class="vux-1px-r">
                {{item.clockOutTime}}
              </div>
              <div class="vux-1px-r">
                <span v-if="item.offPunchRecordStatus=='NORMAL'" class="normal">正常</span>
                <span v-else-if="item.offPunchRecordStatus=='EXCEPTION'" class="exception">异常</span>
                <span v-else-if="item.offPunchRecordStatus =='BEEARLY'" class="late">早退</span>
                <span v-else-if="item.offPunchRecordStatus =='CLOCKISNULL'" class="nopunch">未打卡</span>
                <span v-else class="exception">{{item.offPunchRecordStatus}}</span>
              </div>
              <div class="vux-1px-r">
                <img :src="_getPath(item.offPunchFileStore)" @click="show(_getPathNo(item.offPunchFileStore),$event)"
                     class="previewer-img" style="height: 100%;max-width:100%;">
              </div>
            </div>
          </div>
        </card>
      </div>
    </div>
    <div v-transfer-dom>
      <previewer :list="allImgs" ref="previewer" :options="options"></previewer>
    </div>
    <!--<x-table>-->
    <!--<thead>-->
    <!--<tr bgcolor="#1AAD19">-->
    <!--<th>日期</th>-->
    <!--<th>上班打卡时间</th>-->
    <!--<th>下班打卡时间</th>-->
    <!--</tr>-->
    <!--</thead>-->
    <!--<tbody>-->
    <!--<tr v-for="item in attendList">-->
    <!--<td>{{item.punchDate}}</td>-->
    <!--<td :bgcolor="item.beLate?'#F76260':''">{{item.clockInTime}}</td>-->
    <!--<td :bgcolor="item.leaveEarly?'#F76260':''">{{item.clockOutTime}}</td>-->
    <!--</tr>-->
    <!--</tbody>-->
    <!--</x-table>-->
  </div>
</template>

<script>
  import {XTable, Divider, Card, TransferDom, Previewer,} from 'vux'

  export default {
    name: "list",
    components: {
      XTable,
      Card,
      Divider,
      Previewer
    },
    directives: {
      TransferDom
    },
    data() {
      return {
        attendList: [],
        allImgs: [],//图片预览
        options: {
          getThumbBoundsFn: (index) => {
            let thumbnail = document.querySelectorAll('.list .previewer-img')[this.inde];
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            let rect = thumbnail.getBoundingClientRect();
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          }
        }
      }
    },
    methods: {
      //图片预览
      show(index, e) {
        this.inde = 0;
        document.querySelectorAll('.list .previewer-img').forEach((item, ind) => {
          if (item == e.target) {
            this.inde = ind;
          }
        });
        this.allImgs = [{msrc: this._getPathNo(index), src: this._getPathNo(index)}];
        this.$nextTick(() => {
          this.$refs.previewer.show(0)
        });
      },
    },
    computed: {},
    mounted() {
      this.$getUserInfo().then(userInfo => {
        this.$http.get("/attendance/api/punch", {
          params: {
            userId: userInfo.id,
            noPage: true
          }
        }).then(res => {
          let promise = []
          res.data.data.forEach(item => {
            if (item.offPunchFileStore) {
              promise.push(new Promise(resolve => {
                this.$http.get('/work/api/upload/byid?ids=' + item.offPunchFileStore).then(resp => {
                  item.offPunchFileStore = resp.data.data[item.offPunchFileStore].length > 0 ?
                    resp.data.data[item.offPunchFileStore][0].path : ''
                  resolve()
                });
              }))
            }
            if (item.onPunchFileStore) {
              promise.push(new Promise(resolve => {
                this.$http.get('/work/api/upload/byid?ids=' + item.onPunchFileStore).then(resp => {
                  item.onPunchFileStore = resp.data.data[item.onPunchFileStore].length > 0 ?
                    resp.data.data[item.onPunchFileStore][0].path : ''
                  resolve()
                });
              }))
            }
          });
          Promise.all(promise).then(() => {
            this.attendList = res.data.data;
          })
        })
      })
    }
  }
</script>

<style lang="less">
  @import '~vux/src/styles/1px.less';

  .list {
    .card-padding {
      .card-item {
        border-top: 1px solid #E5E5E5;
        height: 32px;
        line-height: 32px;
        display: flex;
        .vux-1px-r {
          flex: 1;
          text-align: center;
          font-size: 12px;
        }
      }
    }
    .late {
      color: #c7c717;
    }
    .normal {
      color: #008100;
    }
    .exception {
      color: #FF9900;
    }
    .nopunch {
      color: #FF0000
    }
  }

</style>
